<template>
 
      <a-card style="width: 100%">
        <div style="width:100%; height:750px;">
            <div id="main" class="five"></div>
          </div>
      </a-card>
    
</template>

<script>
import { httpAction, getAction, postAction } from '@/api/manage'
import * as echarts from 'echarts';
export default {
    data () {
        return {
        chart: null,
        }
    },
    methods: {
        getzhu(){
            if(this.chart != null && this.chart != '' && this.chart != undefined){
                this.chart.dispose();
            }
            var ROOT_PATH = 'https://echarts.apache.org/examples';
            var chartDom = document.getElementById('main');
            this.chart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '能流图'
                },
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: {
                    type: 'sankey',
                    emphasis: {
                        focus: 'adjacency'
                    },
                    levels: [
                        {
                            depth: 0,
                            itemStyle: {
                                color: '#fbb4ae'
                            },
                            lineStyle: {
                                color: 'source',
                                opacity: 0.6
                            }
                        },
                        {
                            depth: 1,
                            itemStyle: {
                                color: '#b3cde3'
                            },
                            lineStyle: {
                                color: 'source',
                                opacity: 0.6
                            }
                        },
                        {
                            depth: 2,
                            itemStyle: {
                                color: '#ccebc5'
                            },
                            lineStyle: {
                                color: 'source',
                                opacity: 0.6
                            }
                        },
                        {
                            depth: 3,
                            itemStyle: {
                                color: '#decbe4'
                            },
                            lineStyle: {
                                color: 'source',
                                opacity: 0.6
                            }
                        }
                    ],
                    lineStyle: {
                        curveness: 0.5
                    },
                    data: [
                        {
                            name: '电'
                        },
                        {
                            name: '天然气'
                        },
                        {
                            name: '测试产品001'
                        },
                        {
                            name: '测试产品002'
                        },
                        {
                            name: '测试部门001'
                        },
                        {
                            name: '测试产品003'
                        }
                    ],
                    links: [
                        {
                            source: '电',
                            target: '测试产品001',
                            value: 5
                        },
                        {
                            source: '电',
                            target: '测试产品002',
                            value: 3
                        },
                        {
                            source: '天然气',
                            target: '测试部门001',
                            value: 8
                        },
                        {
                            source: '电',
                            target: '测试部门001',
                            value: 3
                        },
                        {
                            source: '测试部门001',
                            target: '测试产品001',
                            value: 1
                        },
                        {
                            source: '测试部门001',
                            target: '测试产品003',
                            value: 2
                        }
                    ]
                }
            };

            option && this.chart.setOption(option);
        },
    },
    created () {
        
    },
    mounted(){
        this.getzhu();
    },
}

</script>

<style>
.five {
  width: 100%;
  height: 100%;
}
</style>
  
  
  